<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跨平台上位机界面</title>
    <style>
        /* 统一样式 */
        body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .btn { 
            padding: 8px 16px; 
            border: none; 
            border-radius: 4px; 
            background: #2196F3; 
            color: white; 
            cursor: pointer; 
        }
        .btn:hover { background: #1976D2; }
        #log { margin-top: 20px; min-height: 100px; padding: 10px; background: #f0f0f0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h2>跨平台上位机</h2>
            <button class="btn" onclick="onReadSerial()">读取串口数据</button>
            <div id="log"></div>
        </div>
    </div>
    <script>
        // 轻量功能：日志显示
        function logMessage(msg) {
            const logEl = document.getElementById('log');
            logEl.innerHTML = `[${new Date().toLocaleTimeString()}] ${msg}<br>${logEl.innerHTML}`;
        }

        // 需本地实现的功能（通过桥接接口调用）
        async function onReadSerial() {
            try {
                // 调用各平台提供的本地接口（统一命名）
                const data = await window.nativeApi.read_serial_port('COM3', 9600);
                logMessage(`接收数据：${data}`);
            } catch (error) {
                logMessage(`错误：${error}`);
            }
        }
    </script>
</html>
    